<script>
import { defineComponent } from 'vue';
import { ElCarousel, ElCarouselItem, ElRow, ElCol } from 'element-plus';
import {ArrowRightBold, SemiSelect} from "@element-plus/icons-vue";

export default defineComponent({
  name: "Index",
  components: {
    ArrowRightBold,
    SemiSelect,
    ElCarousel,
    ElCarouselItem,
    ElRow,
    ElCol
  },
  data() {
    return {
      images: [
        '/etretat.jpg',
        '/bridge.jpg',
        '/frankfurt.jpg',
        '/statue.jpg'
      ],
      loginForm: {
        username: '123',
        password: '123'
      }
    };
  },
  methods: {
    onLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$router.push({ name: 'Main' });
        } else {
          alert('登录失败!');
          console.log('登录失败!');
          return false;
        }
      });
    }
  }
});
</script>

<template>
  <div class="login-background">
  <div style="background-color: #9d2933;width: 80%;height:90%;border-radius:0px 80px 80px 0px;padding: 0;box-shadow: 10px 10px 10px rgba(0, 0, 0,0.6);">
  <el-row style="height: 100%; width: 100%;">
    <el-col :span="14" style="height: 100%;">
        <el-carousel trigger="click" :height="'755px'" style="box-shadow: 10px 0px 10px rgba(0, 0, 0,0.6);">
          <el-carousel-item v-for="(image, index) in images" :key="index">
            <div class="carousel-image" :style="{ backgroundImage: 'url(' + image + ')' }"></div>
          </el-carousel-item>
        </el-carousel>
    </el-col>
    <el-col :span="10" class="login" style="background-color: #f2e6ce;border-radius:0px 80px 80px 0px"  >
        <el-form ref="loginForm" :model="loginForm" @submit.native.prevent="onLogin" style="width: 80%;height: 80%;margin-top: 150px">
          <h1 style="color: #9d2933;font-size: 34px;margin-bottom: 80px">旅游行业管理和运行调度系统</h1>
          <el-form-item label="用户名" prop="username" style="margin-bottom: 40px;margin-left: 40px">
            <template v-slot:label>
              <span style="color: #9d2933;font-weight: bold;font-size: 28px">用户名</span>
            </template>
            <el-input v-model="loginForm.username" autocomplete="username" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="margin-bottom: 60px;margin-left: 40px">
            <template v-slot:label>
              <span style="color: #9d2933;font-weight: bold;font-size: 28px;margin-right: 28px">密码</span>
            </template>
            <el-input type="password"  v-model="loginForm.password" show-password autocomplete="current-password" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-left: 60px;width: 300px;height: 40px"  color="#9d2933"  type="primary"  @click="onLogin" ><span style="color: #f2e6ce;font-weight: bold;font-size: 24px">登录</span><el-icon color="#f2e6ce" size="24px"><ArrowRightBold/></el-icon></el-button>
          </el-form-item>
        </el-form>
    </el-col>
  </el-row>
  </div>
  </div>
</template>

<style scoped lang="scss">
@import "../assets/css/global.css";

.carousel-image {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
}
</style>
<style>
.el-input {
  border: none; /* 移除边框 */
}
</style>